import {
    // 响应式状态 hooks
    useState //react 函数式编程 提供了好用的以use 开头的函数 即hook函数
} from "react";
import TodoForm from "./TodoForm"
import TodoList from "./TodoList"
const Todos = () => {
    // 数据流管理
    // 父组件持有管理数据 props 传递数据 子组件通过props 自定义函数 
    // 以此通知父组件
    const [todos,setTodos] = useState([
        {
            id:1,
            title:'打豆豆',
            isComplete:false
        },
        {
            id:2,
            titile:'算法比赛',
            isComplete:false
        },
    ]) 
    // 新增todo
    const addTodos = ()=>{
        // setTodo 
    }
    return(
        <div className="app">
            {/* 自定义事件 */}
            {<TodoForm onAddTodo={addTodos}/> /* onAddTodo 自定义函数 */}
            <TodoList todos={todos}/>
        </div>
    )
}

export default Todos